<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<body>

    省市区三级联动：

    <select id="province" name="province">
        <option value="-1">请选择</option>
    </select>
    省---
    <select id="city" name="city">
        <option value="-1">请选择</option>
    </select>
    市---
    <select id="district" name="district">
        <option value="-1">请选择</option>
    </select>区


<script type="text/javascript">

    $("#province").change(function () {
        queryJsonToSel($(this).val(), "#city");
    });

    $("#city").change(function () {
        queryJsonToSel($(this).val(), "#district");
    });

    function queryJsonToSel(pId, id) {
        let $select = $(id);
        $select.val("-1");
        //去激活 下一级清理
        $select.change();
        if (pId == "-1") {
            $select.find("option:gt(0)").remove();
            return;
        }
        $.post("/queryCity?region="+pId, function (data) {
            $select.find("option:gt(0)").remove();
            $.each(data, function (i, obj) {
                $select.append("<option value='" + obj.id + "'>" + obj.name + "</option>")
            })
        }, "json");
    }

    queryJsonToSel("100000", "#province");
</script>
</body>
</html>